iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
2
Modern Web

寫給工程師的 WebGL 學習心得系列 第 28

[WebGL - Day28] Displacement Filter (3/3) 在 PixiJS 上完成互動

  • 分享至 

  • xImage
  •  

前篇講了 Shdertoy 上的 Displacement Filter 實作,
今天終於要把程式碼通通組合起來了!


滑鼠互動

跟隨滑鼠軌跡

PixiJS 上讓物件 跟著滑鼠座標移動 的方式,可參考我先前的文章:
[PixiJS - Day-10] Ticker 與 動態製作
PixiJS Mouse tracker

JavaScript:

app.ticker.add(function(delta) {
    // 目前滑鼠的 x 座標
    var mouseX = app.renderer.plugins.interaction.mouse.global.x;

    // 跟隨座標的演算法
    bunny.x += (mouseX - bunny.x) * 0.0625;
});

其中的 0.06251/16 的意思,
就以前學習時的說法,快,2的次方倍非次方倍
就一直沿用著


畫線

在滑鼠移動時會感覺有條線跟著,或著選擇 Debug模式 會看到紅線
就是產生 uv 變化 效果的 中心點

Fragment Shader:

uniform float uX;
uniform float uX2;
uniform float uX3;

在 JavaScript 跟隨滑鼠座標時,也另外產生兩個值進 Shader:
uX:跟著滑鼠 座標x 移動的線 (紅線)
uX2:跟著滑鼠 座標x 移動的線,但跟隨速度較 uX (黃線)
uX3:滑鼠座標 uXuX2,會在 uX2另一邊 (黃線)
Demo
Debug 時的黃球:使用 PixiJS 繪圖API 生成 (JavaScript),
座標與 Shader 產生的黃線位置相同


畫線

實際畫出漸層線的值
Fragment Shader:

uniform float uD;

實作上相當重要的變數,
計算 uXuX2 的相對位置 (紅線黃線距離),
決定畫出來的模糊程度 (距離越效果越 明顯 )
Demo

雖然也可以在 Shader 裡算出 uD 的值,
uD 值在 JavaScript 也有作用,因此在從 JavaScript 帶入
( JavaScript 用這個值決定是否 換頁 )


Debug 模式

雖非必要,當作練習與額外挑戰

JavaScript:
透過 dat.GUI 的選擇,將模式資訊帶進 Shader 裡:
dat.GUI

gui.add( effectController, 'Mode', [ 'NORMAL', 'DEBUG', 'AUTO_DEMO' ] ).onChange( modeChange );
//
function modeChange(){
	switch(effectController.Mode){
		case 'NORMAL':
						// ...
						break;
		case 'DEBUG':
						// ...
						break;
		case 'AUTO_DEMO':
						// ...
						break;
	}
}

Fragment Shader:

uniform bool uDebugMode;

分上下層:

只在下層顯示 debug 效果

if(uv.y > 0.5 ){
    // ...
}

在 PixiJS 裡,下方是 uv.y>.5
這時輸出的畫面再畫上半透明的黑色
Demo

接著再畫上 uv變化 的值:

maskDebug = mask;
//...
if(uDebugMode == true){
    color = texture2D(uSampler, uv2);
    color = mix(color, vec4(maskDebug), 0.5);
}else{
    color = texture2D(uSampler, uv2);
}

mask 是原本用來做 uv變化 的值,
在 debug 模式時,再畫上一次,
這次 不做輸出的遮罩 ,直接在輸出畫面上再畫上 uv變化 的值 (因次會看見白色漸層)


就完成土法煉鋼的 PixiJS Displacement Filter 互動 了!


上一篇
[WebGL - Day27] Displacement Filter (2/3) 在 Shadertoy 上模擬與互動
下一篇
[WebGL - Day29] WebGL 的一些討論
系列文
寫給工程師的 WebGL 學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言